<template>
  <view>
    <!-- <yy-paging v-model="dataList" @query="queryList" ref="paging" :showMoreNoMore="false" :auto="false" @scroll="scroll" :refresher-enabled="false"> -->
    <u-navbar
      back-text=""
      title=""
      back-icon-color="#fff"
      class="fixed z-50 bg-transparent"
      :background="{ backgroundColor: isScroll ? '#fff' : 'transparent' }"
      :border-bottom="false"
      :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
    >
      <view class="flex justify-between px-4 w-full">
        <view></view>
        <view @click="showShare = true"><u-icon name="more-dot-fill" color="#fff" class="font-bold rotate-90" size="26"></u-icon></view>
      </view>
    </u-navbar>
    <view class="flex flex-col gap-2">
      <view class="aspect-square relative z-10">
        <view
          class="absolute top-0 left-0 z-20 w-full h-full pointer-events-none"
          style="background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)"
        ></view>
        <image :src="d?.images?.[currentImage]" class="size-full" mode="scaleToFill" />
      </view>

      <view class="flex z-20 flex-col gap-2 -mt-[130px]">
        <!-- 相册 -->
        <view class="px-4">
          <view class="inline-flex items-center bg-[#171B24] rounded-full p-1">
            <view
              class="rounded-[10px] px-2 py-1 font-medium"
              :class="k == currentImage ? 'bg-[#FFFFFF]  text-[#171B24]' : 'text-white'"
              v-for="(i, k) in ['封面', '环境图', '渔获图', '相册']"
              @click="switchImages(k)"
              :key="k"
            >
              <view class="text-[11px]"> {{ i }} </view>
            </view>
          </view>
        </view>
        <!-- 名称信息 -->
        <view class="px-4">
          <view class="flex flex-col gap-3 py-4 bg-[#FFFFFF] rounded-[12px] relative">
            <view
              class="absolute top-0 right-2 w-[48px] h-[38px] bg-no-repeat bg-center bg-cover flex justify-center py-1"
              style="background-image: url('/static/rectangle@3X.png')"
            >
              <view class="text-[10px] text-[#FFFFFF] font-medium"> {{ d.basan_type == 1 ? '手杆' : '路亚' }} </view>
            </view>
            <view class="font-semibold text-[16px] text-[#171B24] px-4 line-clamp-1">{{ d?.name }}</view>
            <view class="py-1 w-full bg-gradient-to-r to-transparent from-[#E5F6F6] pl-[60px] relative">
              <image src="/static/tagsFishingSpecies@3X.png" class="h-[20px] absolute -left-2 -top-1" mode="heightFix" />
              <view class="text-[11px] text-[#029BA6] line-clamp-1">
                <text v-for="(i, k) in d?.ext?.fish_species" :key="k">{{ i?.name }}{{ k !== d?.ext?.fish_species - 1 ? '、' : '' }}</text>
              </view>
            </view>

            <view class="px-4">
              <view class="flex justify-between p-4 rounded-[12px] bg-gray-50">
                <view class="flex flex-col gap-2">
                  <view class="flex gap-2 items-center">
                    <view class="text-[13px] text-[#5C6068]"> 钓点天气 </view>
                    <view class="w-[1px] h-[8px] border-[1px] border-solid border-[#A5A9B0]"> </view>
                    <view class="text-[13px] text-[#161A24]"> {{ d?.weather?.now.text }} </view>
                  </view>
                  <view class="flex gap-2 items-center font-bold">
                    <view class="size-[32px] bg-gray-100 rounded-full">
                      <image src="" class="size-full" mode="scaleToFill" />
                    </view>
                    <view class="flex items-end">
                      <view class="text-[24px] text-[#161A24] leading-none"> {{ d?.weather?.now.temp }} </view>
                      <view class="text-[12px] text-[#161A24]"> °C </view>
                    </view>
                  </view>
                </view>
                <view class="flex flex-col justify-end">
                  <view class="text-[11px] text-[#5C6068]"> 湿度：{{ d?.weather?.now.rh }}</view>
                  <view class="text-[11px] text-[#5C6068]"> 风速：{{ d?.weather?.now.wind_class }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 钓点位置 -->
        <view class="px-4">
          <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[12px]">
            <view class="flex justify-between items-center">
              <view class="font-semibold text-[16px] text-[#171B24]">钓点位置</view>
              <view class="text-[11px] text-[#606368]">距离我7.5km</view>
            </view>
            <view class="flex gap-3 justify-between">
              <view class="w-full h-[88px] bg-[#F4F6F8] rounded-[8px] overflow-hidden">
                <map :latitude="d.lat" class="!h-[88px]" :longitude="d.lng" :markers="covers"> </map>
              </view>
            </view>
            <view class="flex justify-between items-center">
              <view class="flex flex-col gap-1 justify-between">
                <view class="text-[14px] text-[#171B24] line-clamp-1 font-medium"> {{ d.location_name }}</view>
                <view class="flex gap-1 items-center">
                  <view class="flex-none">
                    <u-icon name="map-fill" color="#919499" size="28"></u-icon>
                  </view>
                  <view class="text-[12px] text-[#919499] line-clamp-1">{{ d.address }}</view>
                </view>
              </view>
              <view class="size-[32px] bg-[#E5F6F6] rounded-full">
                <image src="/static/iconnavigation@3X.png" class="size-full" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>
        <!-- g个人信息 -->
        <view class="px-4">
          <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[12px]">
            <view class="flex justify-between items-center">
              <view class="flex gap-2 items-center">
                <view class="size-[38px] rounded-full overflow-hidden">
                  <image :src="d?.user?.avatar" class="size-full" mode="scaleToFill" />
                </view>
                <view class="text-[14px] text-[#171B24] line-clamp-1 font-medium"> {{ d?.user?.nickname }} </view>
              </view>
              <view class="text-[11px] text-[#606368]">更新于{{ vk.myfn.getTimeAgo(d.create_time) }}</view>
            </view>
            <view class="flex gap-1">
              <image src="/static/icon“@3X.png" mode="scaleToFill" class="size-[16px] flex-none" />
              <view class="text-[13px] text-[#161A24]">
                {{ d.description }}
              </view>
            </view>
          </view>
        </view>
        <!-- 钓点信息 -->
        <view class="px-4">
          <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[12px]">
            <view class="font-semibold text-[16px] text-[#171B24]">钓点攻略</view>

            <template v-if="d.basan_type == 1">
              <view class="bg-[#F4F6F8] rounded-[8px] p-4 flex justify-between">
                <view class="text-[12px] text-[#606368]">作钓方式</view>
                <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.fish_type?.name }}</view>
              </view>
              <view class="bg-[#F4F6F8] rounded-[8px] p-4 flex justify-between">
                <view class="text-[12px] text-[#606368]">钓竿长度</view>
                <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.rod_length?.name }}m</view>
              </view>

              <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[8px] p-4">
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">主线长</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d.main_line_length }}/m</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">主线粗</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d.main_line_size }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">子线粗</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d.sub_line_size }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">鱼钩类型</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.fish_hook_type?.name }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">鱼钩大小</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.fish_hook_size }}#</view>
                </view>
              </view>
              <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[8px] p-4">
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">浮漂类型</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.float_type?.name }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">铅重</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d.float_lead_weight }}/g</view>
                </view>
              </view>
              <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[8px] p-4">
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">饵料</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.bait_name?.name }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">开饵水比</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d.bait_water_ratio_max }} :{{ d.bait_water_ratio_min }} </view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">饵料状态</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.bait_status?.name }}</view>
                </view>
              </view>
            </template>
            <template v-if="d.basan_type == 2">
              <view class="bg-[#F4F6F8] rounded-[8px] p-4 flex justify-between">
                <view class="text-[12px] text-[#606368]">作钓类型</view>
                <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.fish_type?.name }}</view>
              </view>
              <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[8px] p-4">
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">建议钓组</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.fish_group?.name }}</view>
                </view>
                <view class="flex justify-between">
                  <view class="text-[12px] text-[#606368]">建议用饵</view>
                  <view class="text-[13px] text-[#171B24] font-medium">{{ d?.ext?.bait_name?.name }}</view>
                </view>
              </view>
            </template>
          </view>
        </view>
        <!-- 提示信息 -->
        <view class="flex justify-center text-[10px] text-[#C1C4C9]"> 以上信息由用户上传制定，具体以实际情况为准 </view>
        <view></view>
      </view>
    </view>
    <view class="fixed bottom-0 z-[9999] w-full">
      <view class="flex justify-between px-4 py-3 bg-white rounded-t-[16px] z-10">
        <view class="flex gap-4 items-center">
          <view class="flex flex-col gap-1 justify-center items-center" @click="!d.is_collection ? collect() : delCollect()">
            <view class="size-[24px]">
              <image src="/static/icoc_bookmarks_selected.png" class="size-full" v-if="d.is_collection" mode="scaleToFill" />
              <image src="/static/icoc_bookmarks_default@3X.png" class="size-full" v-else mode="scaleToFill" />
            </view>
            <view class="text-[10px] text-[#171B24] font-medium"> {{ d.is_collection ? '已收藏' : '收藏' }}</view>
          </view>
          <view class="flex flex-col gap-1 justify-center items-center" @click="showShare = true">
            <view class="w-[24px] h-[24px]">
              <image src="/static/icon_share@3X1.png" class="size-full" mode="scaleToFill" />
            </view>
            <view class="text-[10px] text-[#171B24] font-medium">分享</view>
          </view>
        </view>

        <view
          @click="goHere"
          class="w-[102px] h-[38px] bg-[#171B24] shadow-[0px_2px_8px_0px_rgba(26,164,174,0.28)] rounded-[21px] flex justify-center items-center"
        >
          <view class="font-medium text-[14px] text-[#FFFFFF]"> 到这去 </view>
        </view>
      </view>
    </view>

    <!-- 弹框 -->
    <view class="cu-modal bottom-modal" @click="showShare = false" :class="showShare ? 'show' : ''">
      <view class="cu-dialog !bg-white !rounded-t-[16px]" @click.stop>
        <view class="flex flex-col gap-4 py-5">
          <view class="flex justify-between items-center px-4">
            <view class="font-bold text-[20px] text-[#171B24]">分享至</view>
            <view class="w-[24px] h-[24px] bg-[#F4F6F8] flex justify-center items-center rounded-full" @click="showShare = false">
              <u-icon name="close" color="#171B24" size="26"></u-icon>
            </view>
          </view>
          <div class="bg-[#F4F6F8] w-full h-[1px]"></div>
          <view class="grid grid-cols-4 gap-5 px-4">
            <view class="flex flex-col gap-2 justify-center items-center" v-for="(i, k) in shareList" :key="k" @click="handleShare(i)">
              <view class="size-[46px] rounded-full">
                <image :src="`/static/${i.icon}.png`" class="size-full" mode="scaleToFill" />
              </view>
              <view class="text-[11px] text-[#606368]">{{ i.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        d: {},
        automatic: false,
        showShare: false,
        shareList: [
          {
            name: '微信好友',
            icon: 'icoc_wechat@3X'
          },
          {
            name: '微信朋友圈',
            icon: 'iconmoments@3X'
          },
          {
            name: 'QQ好友',
            icon: 'iconQq@3X'
          },
          {
            name: 'QQ空间',
            icon: 'icon_qqSpace@3X'
          },
          {
            name: '举报',
            icon: 'iconreport@3X'
          },
          {
            name: '复制链接',
            icon: 'iconcopyLink@3X'
          }
          // {
          //   name: '删除',
          //   icon: 'icondelete@3X'
          // }
        ],
        id: '',
        currentImage: 0,
        covers: []
      }
    },
    onLoad(options) {
      this.id = options.id
      vk.showLoading('loading...')
      this.queryList()
    },
    methods: {
      switchImages(k) {
        let d = [0, 1, 2].includes(k)
        if (d) return (this.currentImage = k)
        vk.myfn.previewImage({
          urls: this.d.images,
          current: this.currentImage
        })
      },
      async queryList(page, limit) {
        const res = await api.getBasanDetail({ id: this.id })
        if (!res?.code) return
        this.d = res.data
        this.covers = [{ latitude: res.data.lat, longitude: res.data.lng, iconPath: '/static/location.png' }]

        const isCurrentUser = res.data.user_id === vk.getVuex('$user.userInfo.id')
        if (isCurrentUser && !this.shareList.find(item => item.name === '删除')) {
          this.shareList.push({
            name: '删除',
            icon: 'icondelete@3X'
          })
        }
        vk.hideLoading()
      },

      // 收藏
      async collect() {
        let res = await api.collect({
          id: this.id
        })
        if (!res.code) return
        vk.toast(res.msg, 'none')
        this.queryList()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 240
      },

      //删除收藏
      async delCollect() {
        let res = await api.collectDelete({
          id: this.id
        })
        if (!res.code) return
        vk.toast(res.msg, 'none')
        this.queryList()
      },
      // 删除钓点
      async deleteFishingSpot() {
        vk.confirm('是否确认删除该钓点', async res => {
          if (res.confirm) {
            let res = await api.deleteBasan({
              id: this.id
            })
            if (!res.code) return
            vk.toast(res.msg, 'none')
            const eventChannel = this.getOpenerEventChannel()
            if (eventChannel.emit) eventChannel.emit('update')
            vk.navigateBack()
            vknav
          }
        })
      },
      // 复制链接
      async copyLink() {
        vk.myfn.copyToClipboard('复制复制复制复制复制复制').then(() => {
          vk.toast('复制成功')
        })
      },
      async handleShare(item) {
        this.showShare = false
        // 使用 switch 语句优化分支逻辑
        switch (item.name) {
          case '删除':
            await this.deleteFishingSpot()
            break
          case '举报':
            vk.navigateTo(`/pages/my/report?id=${this.id}`)
            break
          case '复制链接':
            await this.copyLink()
            break
          case '微信好友':
            // TODO: 实现微信好友分享
            break
          case '微信朋友圈':
            // TODO: 实现朋友圈分享
            break
          case 'QQ好友':
            // TODO: 实现QQ好友分享
            break
          case 'QQ空间':
            // TODO: 实现QQ空间分享
            break
          default:
            console.log('未处理的分享类型:', item.name)
        }
      },
      async goHere() {
        try {
          const { lat: latitude, lng: longitude, address: name } = this.d
          if (!latitude || !longitude) {
            return vk.toast('位置信息不完整', 'none')
          }
          await vk.myfn.openMap(latitude, longitude, name)
        } catch (error) {
          console.error('打开地图失败:', error)
          vk.toast('打开地图失败', 'none')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f6f8 !important;
  }
</style>
